<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            height: 500px;
            width: 100vw;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .box2 {
            height: 480px;
            width: 200px;
            border: 1px solid black;
        }
        .img {
            height: 200px;
            width: 200px;
        }
    </style>
</head>

<body>
    <script>
        let stuArr = [
            { name: "张三", score: 88, gender: "男" },
            { name: "李四", score: 60, gender: "男" },
            { name: "王五", score: 98, gender: "女" },
            { name: "赵六", score: 49, gender: "男" },
            { name: "孙七", score: 45, gender: "女" },
            { name: "周八", score: 92, gender: "男" },
            { name: "吴九", score: 79, gender: "女" },
            { name: "郑十", score: 53, gender: "女" },
        ]


        function filter(arr) {
            let newArr = arr.filter(function (item) {
                return item.score >= 60;
            })
            return newArr;
        }
        console.log(filter(stuArr))


        function map(arr) {
            let newArr = arr.map(function (item) {
                return item.name;
            })
            return newArr;
        }
        console.log(map(stuArr))


        function reduce(arr) {
            let newArr = arr.map(function (item) {
                return item.score;
            })
            let countArr = newArr.reduce(function (prev, cur) {
                return (prev + cur);
            })
            return (countArr / newArr.length);
        }
        console.log(reduce(stuArr))


        function map2(arr) {
            let newArr = arr.map(function (item) {
                if (item.score >= 80) {
                    item.lever = "优秀";
                } else if (item.score < 80 && item.score >= 60) {
                    item.lever = "及格";
                } else if (item.score < 60 && item.score >= 0) {
                    item.lever = "不及格";
                }
                return item;
            })
            return newArr;
        }
        console.log(map2(stuArr))

        function forEach(arr) {
            arr.forEach(function (item) {
                if (item.score >= 80) {
                    item.lever = "优秀";
                } else if (item.score < 80 && item.score >= 60) {
                    item.lever = "及格";
                } else if (item.score < 60 && item.score >= 0) {
                    item.lever = "不及格";
                }
            })
            return arr;
        }
        console.log(forEach(stuArr))



        function find(arr) {
            let newArr = arr.find(function (num) {
                return (num.score > 80 && num.gender == "女");
            })
            return newArr;
        }
        console.log(find(stuArr))


        function some(arr) {
            let newArr = arr.some(function (item) {
                return item < 60;
            })
            return (newArr ? "全体及格" : "有人不及格");
        }
        console.log(some(stuArr))

        let goods = [
            {
                "id": '1',
                "name": "华为Mate60 Pro",
                "price": 6999,
                "stock": 50,
                "image": "https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/pdp/phones/mate60-pro-plus/img/kv/sellpoint-2@2x.webp",
                "category": "手机"
            },
            {
                "id": '2',
                "name": "苹果iPhone 15",
                "price": 7999,
                "stock": 30,
                "image": "https://store.storeimages.cdn-apple.com/1/as-images.apple.com/is/iphone-15-model-unselect-gallery-2-202309?wid=5120&hei=2880&fmt=webp&qlt=70&.v=aVFiZEF4WDEvUWJNSU5HRDg4cklnTGdzSmpObkZCM3MrNmJ5SkhESlNDaU00NGE1MW1TNWM0aU1qbjRuMkdmMUpFd0xhWDVibStLdGRYRmxkNGI4VTdpMGJRT0ppMjh4RlRZQkc0Q3FZZENvSENINmdsRnQ5dUdQR0RpRENOcVA&traceId=1",
                "category": "手机"
            },
            {
                "id": '3',
                "name": "小米电视6 OLED",
                "price": 4999,
                "stock": 20,
                "image": "https://bkimg.cdn.bcebos.com/pic/f2deb48f8c5494eef01f39de55a7f7fe9925bd31d0e0?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080",
                "category": "家电"
            },
            {
                "id": '4',
                "name": "鸿蒙笔记本",
                "price": 7999,
                "stock": 15,
                "image": "https://res2.vmallres.com/pimages/FssCdnProxy/vmall_product_uom/pmsSalesFile/428_428_E5647FB1A7C98BC718733D8F6FF21608.png",
                "category": "电脑"
            },
        ]
        document.write(`<div class="box1">`)
        for (i = 0; i < 4; i++) {
            document.write(`<div class="box2">`)
            // console.log(goods[i].image)
            document.write(`<img class="img" src="${goods[i].image}">`)
            document.write(`<p>品名：${goods[i].name}</p>`)
            document.write(`<p>价格：${goods[i].price}</p>`)
            document.write(`<p>分类：${goods[i].category}</p>`)
            document.write(`</div>`)
        }
        document.write("</div>")
    </script>
</body>

</html>